<template>
  <div>
    <basic-container>
      <avue-crud
        ref="crud"
        :page.sync="page"
        :data="buyerList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="fetchBuyerList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <template slot="menuLeft">
          <!-- <router-link  to="./buyer/add">新增</router-link> -->
          <el-button type="primary" icon="el-icon-edit" size="small" @click="newList">新增</el-button>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button icon="el-icon-view" type="text" size="mini" @click="ToDetail(scope.row)">详情</el-button>
          <el-button type="text" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" size="mini" icon="el-icon-delete" @click="rowDel(scope.row)">删除</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <!-- <el-dialog title="采购商编辑" :visible.sync="dialogFormVisible" width="50%">
      <edit-temp :form="editValue" :merchantList="merchantList"></edit-temp>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>-->
  </div>
</template>

<script>
import Request from "../request.js";
// import editTemp from "./edit";
import { getStore, setStore } from "@/util/store";
import { tableOption } from "@/const/crud/pds/merchant/buyer";
// 新接口
import {
  fetchList,
  addObj,
  getObj,
  delObj,
  putObj
} from "../../../api/saleb/buyer";
let buyerInfo = function() {
  return {
    merchantId: "",
    buyerName: "",
    shortName: "",
    contact: "",
    telephone: "",
    address: "",
    sort: "100",
    payPeriod: "1",
    needPush: "0",
    buyerType: "1",
    needConfirmation: "0",
    status: "1",
    uid: "",
    remarks: ""
  };
};
export default {
  data: function() {
    return {
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
        isAsc: false // 是否倒序
      },
      layout: "total, sizes, prev, pager, next, jumper",
      request: new Request(),
      editValue: buyerInfo(),
      dialogFormVisible: false,
      buyerList: [],
      merchantName: "",
      merchantId: "",
      buyerType: "",
      contact: "",
      selectStatus: "",
      buyerName: "",
      merchantList: [],
      tableOption: tableOption,
      tableLoading: false
    };
  },
  components: {
    // editTemp
  },
  watch: {},
  created() {
    // this.getMerchantList();
  },
  mounted() {
      this.getHeight();
    },
  methods: {
    getHeight() {
      let tableHeight = Math.max(window.innerHeight - 520, 210);
      this.tableOption.maxHeight = tableHeight + "px";
    },
    // 详情
    ToDetail(row) {
      let query = {
        res: {
          id: row.id
        }
      };
      this.$router.push({
        path: "/buyer/buyerdetails",
        query: query
      });
    },
    // 删除
    rowDel(row, index) {
      this.$confirm("是否确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delObj(row.id).then(res => {
          console.log('aaaaa',res,res.data.code );
          if (res.data.code === 0) {
            this.$message({ message: "删除成功", type: "success" });
            this.buyerList.splice(index, 1);
          } else {
            this.$message.warning(res.data.msg);
          }
        });
      });
    },
    // 编辑
    edit(row) {
      // console.log(id);
      let query = {
        res: {
          id: row.id
        }
      };
      this.$router.push({ path: "/buyer/buyeredit", query: query });
    },

    // 新增
    newList() {
      // debugger;
      this.$router.push({ path: "/buyer/buyeradd" });
    },

    confirm() {
      this.dialogFormVisible = false;
      this.editBuyer();
    },
    /**
     * 刷新回调
     */
    refreshChange(info) {
      this.fetchBuyerList(this.page, this.filterForm(info.searchForm));
    },
    searchChange(form, done) {
      this.fetchBuyerList(this.page, form);
      done();
    },
    // 查询采购商列表
    fetchBuyerList(page, params={}) {
      // let params = {
      //   pageSize: 100,
      //   status: 2
      // };
      console.log(page);
      
      params.pageSize = page.pageSize;
      params.currentPage = page.currentPage;
      this.tableLoading = true;
      fetchList(params).then(res => {
        console.log(res);

        if (res.status === 200) {
          this.buyerList = res.data.data.records;
          this.page.total = res.data.data.total;
          this.tableLoading = false;
        } else {
          this.$message.warning("未查询到采购商列表：" + res.msg);
          this.tableLoading = false;
        }
      });
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.fetchBuyerList(this.page);
    },
    currentChange(val) {
      console.log(val);
      this.page.currentPage = val;
      this.fetchBuyerList(this.page);
    }
    // 查询商家 列表
    // getMerchantList() {
    //   let params = {
    //     pageSize: 100,
    //     status: 2
    //   };
    //   this.request.getMerchantList(params).then(res => {
    //     if (res.code === 200) {
    //       this.merchantList = res.ext.list;
    //       this.merchantList.push({
    //         id: getStore({ name: "pmId" }),
    //         merchantName: getStore({ name: "pmName" })
    //       });
    //       //this.total = res.ext.count;
    //     } else {
    //       this.$message.warning("未查询到采购商列表：" + res.msg);
    //     }
    //   });
    // }
  }
};
</script>

<style scoped lang="scss">
.top {
  background-color: white;
  padding: 20px 10px 0;
  margin-bottom: 20px;
}

.el-row {
  margin-bottom: 10px;
}

.select-option {
  width: 100px;
}

.page-box {
  background-color: white;
  display: flex;
  justify-content: space-between;
}
</style>
